<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <div class="flex flex-column">
            {{#unless this.session.user.isEditor}}
                <div class="gh-canvas-breadcrumb">
                    <LinkTo @route="settings" data-test-breadcrumb>
                        Settings
                    </LinkTo>
                    {{svg-jar "arrow-right-small"}} Staff
                </div>
            {{/unless}}
            <h2 class="gh-canvas-title" data-test-screen-title>
                Staff
            </h2>
        </div>

        {{!-- Do not show Invite user button to authors --}}
        {{#unless this.currentUser.isAuthorOrContributor}}
            <section class="view-actions">
                {{#if (gh-user-can-admin this.session.user)}}
                    <span class="dropdown">
                        <GhDropdownButton
                            @dropdownName="staff-actions-menu"
                            @classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
                            @title="Staff Actions"
                            data-test-button="staff-actions"
                        >
                            <span>
                                {{svg-jar "settings"}}
                                <span class="hidden">Actions</span>
                            </span>
                        </GhDropdownButton>
                        <GhDropdown
                            @name="staff-actions-menu"
                            @tagName="ul"
                            @classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
                        >
                            <li>
                                <button type="button" {{on "click" this.toggleResetAllPasswordsModal}}>
                                    <span>Reset all passwords</span>
                                </button>
                            </li>
                        </GhDropdown>
                    </span>
                {{/if}}
                <button class="gh-btn gh-btn-primary" data-test-button="invite-staff-user" type="button" {{on "click" this.toggleInviteUserModal}}><span>Invite people</span></button>
            </section>
        {{/unless}}
    </GhCanvasHeader>

    {{#if this.showInviteUserModal}}
        <GhFullscreenModal @modal="invite-new-user"
            @close={{this.toggleInviteUserModal}}
            @modifier="action wide invite-user" />
    {{/if}}

    {{#if this.showResetAllPasswordsModal}}
        <GhFullscreenModal @modal="reset-all-passwords"
            @close={{this.toggleResetAllPasswordsModal}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container gh-team">
    {{!-- Show invited users to everyone except authors --}}
    {{#unless this.currentUser.isAuthorOrContributor}}
        {{#if this.invites}}
        <section class="gh-main-section gh-invited-users apps-first-header" data-test-invited-users>
            <h4 class="gh-main-section-header small">Invited users</h4>
            <div class="apps-grid">

                {{#each this.invites as |invite|}}
                    <GhUserInvited @invite={{invite}} @reload={{perform this.backgroundUpdateTask}} as |component|>
                        <div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
                            <article class="apps-card-app">
                                <div class="apps-card-left">
                                    <span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
                                    <div class="apps-card-meta">
                                        <h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
                                        <p class="apps-card-app-desc">
                                            {{#if invite.pending}}
                                                <span class="description-error">
                                                    Invitation not sent - please try again
                                                </span>
                                            {{else}}
                                                <span class="description" data-test-invite-description>
                                                    Invitation sent: {{component.createdAt}},
                                                    {{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
                                                </span>
                                            {{/if}}
                                        </p>
                                    </div>
                                </div>
                                <div class="apps-card-right">
                                    <div class="apps-configured">
                                        {{#if component.isSending}}
                                            <span>Sending Invite...</span>
                                        {{else}}
                                            <a class="apps-configured-action red-hover" href="#revoke" {{on "click" component.revoke}} data-test-revoke-button>
                                                Revoke
                                            </a>
                                            <a class="apps-configured-action green-hover" href="#resend" {{on "click" component.resend}} data-test-resend-button>
                                                Resend
                                            </a>

                                            <span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
                                        {{/if}}
                                    </div>
                                </div>
                            </article>
                        </div>
                    </GhUserInvited>
                {{/each}}

            </div>
        </section>
        {{/if}}
    {{/unless}}

    <section class="gh-main-section gh-active-users {{unless this.invites "apps-first-header"}}" data-test-active-users>
        <h4 class="gh-main-section-header small">Active users</h4>
        <div class="apps-grid">
            {{!-- For authors/contributors, only show their own user --}}
            {{#if this.currentUser.isAuthorOrContributor}}
                <GhUserActive @user={{this.currentUser}} as |component|>
                    <GhUserListItem @user={{this.currentUser}} @component={{component}} />
                </GhUserActive>
            {{else}}
                {{#vertical-collection this.activeUsers
                    key="id"
                    containerSelector=".gh-main"
                    estimateHeight=75
                    as |user|
                }}
                    <GhUserActive @user={{user}} as |component|>
                        <GhUserListItem @user={{user}} @component={{component}} />
                    </GhUserActive>
                {{/vertical-collection}}
            {{/if}}
        </div>
    </section>
    </section>

    {{!-- Don't show if we have no suspended users or logged in as an author --}}
    {{#if (and this.suspendedUsers (not this.currentUser.isAuthorOrContributor))}}
    <section class="apps-grid-container gh-active-users" data-test-suspended-users>
        <span class="apps-grid-title">Suspended users</span>
        <div class="apps-grid">
            {{#each this.suspendedUsers key="id" as |user|}}
                <GhUserActive @user={{user}} as |component|>
                    <GhUserListItem @user={{user}} @component={{component}} />
                </GhUserActive>
            {{/each}}
        </div>
    </section>
    {{/if}}
</section>
